<template>
  <div class="vab-app-main">
    <section>
      <div class="index-container">
        <el-row>
          <el-col :span="24">
            <el-card class="box-card">
              <div class="flex">
                <div class="grid-bg">
                  <img src="../../assets/cover.gif" alt="">
                </div>
                <div class="page-header-tip flex">
                  <span class="grid-con">
                  <h2 class="con-title">下午好 admin，你一定有些累了，喝杯咖啡提提神。</h2>
                  <p class="title-bg">
                    最近更新：🎉 <a href="#" style="color: #1890ff;">Vue Admin Plus </a>累计完成6种布局、9种主题，覆盖绝大多数使用场景。📦 update️：vue v3.2.45；自定义水印demo；语音合成demo；vscode代码智能提醒 v1.1.2；富文本编辑器添加图片上传demo；组件按需自动导入。
                    <span style="color:#FF5722">双12特惠，1299版本买1得4，799版本买1得2: </span>&nbsp;<a href="#"
                                                                                            style="color: #1890ff;"
                  >点我购买</a>
                  </p>
                </span>
                </div>
                <div class="page-header-avatar-list flex">
                  <div class="vab-avatar-list ">
                    <el-avatar :src="cover_1"></el-avatar>
                    <el-avatar></el-avatar>
                    <el-avatar :src="cover_2"></el-avatar>
                  </div>
                  <p>participants</p>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6" class="chart">
            <el-card shadow="hover" :body-style="{ padding: '0px' ,height: '288px'}">
              <div style="height: 100%;">
                <div class="head-chart">
                <span class="icon-chart">
                   <i class="el-icon-data-line"></i>访问量
                </span>
                  <span class="cover-chart">
                  <span class="day-chart">日</span>
                </span>
                </div>
                <div class="chart-pic" ref="chart_1"></div>
                <div class="text-chart">
                  <span>日均访问量：745</span>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6" class="chart">
            <el-card shadow="hover" :body-style="{ padding: '0px' ,height: '288px'}">
              <div style="height: 100%;">
                <div class="head-chart">
                <span class="icon-chart">
                     <i class="el-icon-s-data"></i>授权数
                </span>
                  <span class="cover-chart">
                  <span class="day-chart">周</span>
                </span>
                </div>
                <div class="chart-pic" ref="chart_2"></div>
                <div class="text-chart">
                  <span>授权数：123</span>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="12" class="chart">
            <el-card shadow="hover" :body-style="{ padding: '0px' ,height: '288px'}">
              <div ref="chart_3" class="chart-pro"></div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="grid-icon">
          <el-col :span="3">
            <el-card shadow="hover">
              <div class="flex">
                <div class="el-badge">
                  <span class="icon iconfont">&#xe623;</span>
                </div>
                <p>随机换肤</p>
              </div>
            </el-card>
          </el-col>
          <el-col :span="3">
            <el-card shadow="hover">
              <div class="flex">
                <div class="el-badge">
                  <span class="icon iconfont">&#xe60c;</span>
                </div>
                <p>主题配置</p>
              </div>
            </el-card>
          </el-col>
          <el-col :span="3">
            <el-card shadow="hover">
              <div class="flex">
                <div class="el-badge">
                  <span class="icon iconfont">&#xe607;</span>
                </div>
                <p>网站升级</p>
              </div>
            </el-card>
          </el-col>
          <el-col :span="3">
            <el-card shadow="hover">
              <div class="flex">
                <div class="el-badge">
                  <span class="icon iconfont">&#xe612;</span>
                </div>
                <p>百度一下</p>
              </div>
            </el-card>
          </el-col>
          <el-col :span="3">
            <el-card shadow="hover">
              <div class="flex">
                <div class="el-badge">
                  <span class="icon iconfont">&#xe78f;</span>
                </div>
                <p>播放器</p>
              </div>
            </el-card>
          </el-col>
          <el-col :span="3">
            <el-card shadow="hover">
              <div class="flex">
                <div class="el-badge">
                  <span class="icon iconfont">&#xe63e;</span>
                </div>
                <p>表格</p>
              </div>
            </el-card>
          </el-col>
          <el-col :span="3">
            <el-card shadow="hover">
              <div class="flex">
                <div class="el-badge">
                  <span class="icon iconfont">&#xe622;</span>
                </div>
                <p>源码</p>
              </div>
            </el-card>
          </el-col>
          <el-col :span="3">
            <el-card shadow="hover">
              <div class="flex">
                <div class="el-badge">
                  <span class="icon iconfont">&#xe790;</span>
                </div>
                <p>公告</p>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-card shadow="hover" :body-style="{ height: '383px'}">
              <div class="map-header">
              <span class="map-title">
                <i class="el-icon-data-line" style="font-size: 14px;"></i>
                <span class="head-text">中国地图</span>
              </span>
                <span class="map-cover">
                <span class="cover-title">我爱你这个，亲爱的母亲</span>
              </span>
              </div>
              <div class="map" ref="map"></div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card shadow="hover" :body-style="{ height: '383px'}">
              <div ref="earth" class="earth"></div>
            </el-card>
          </el-col>
        </el-row>

      </div>
    </section>
  </div>
</template>
<script>
import cover_2 from '../../assets/cover_2.gif'
import cover_1 from '../../assets/cover_1.gif'
import map from '../../utils/map'
import data from '../../utils/data.json'

export default {
  name: 'home',
  data() {
    return {
      cover_2: cover_2,
      cover_1: cover_1
    }
  },
  methods: {
    randomData() {
      return Math.round(Math.random() * 500)
    },
    drawMap() {
      //加载中国地图
      let mapData = this.$refs.map
      let myChart = this.$echarts.init(mapData)
      // 绘制图表
      let myData = [
        { name: '北京', value: '100' }, { name: '天津', value: this.randomData() },
        { name: '上海', value: this.randomData() }, { name: '重庆', value: this.randomData() },
        { name: '河北', value: this.randomData() }, { name: '河南', value: this.randomData() },
        { name: '云南', value: this.randomData() }, { name: '辽宁', value: this.randomData() },
        { name: '黑龙江', value: this.randomData() }, { name: '湖南', value: this.randomData() },
        { name: '安徽', value: this.randomData() }, { name: '山东', value: this.randomData() },
        { name: '新疆', value: this.randomData() }, { name: '江苏', value: this.randomData() },
        { name: '浙江', value: this.randomData() }, { name: '江西', value: this.randomData() },
        { name: '湖北', value: this.randomData() }, { name: '广西', value: this.randomData() },
        { name: '甘肃', value: this.randomData() }, { name: '山西', value: this.randomData() },
        { name: '内蒙古', value: this.randomData() }, { name: '陕西', value: this.randomData() },
        { name: '吉林', value: this.randomData() }, { name: '福建', value: this.randomData() },
        { name: '贵州', value: this.randomData() }, { name: '广东', value: this.randomData() },
        { name: '青海', value: this.randomData() }, { name: '西藏', value: this.randomData() },
        { name: '四川', value: this.randomData() }, { name: '宁夏', value: this.randomData() },
        { name: '海南', value: this.randomData() }, { name: '台湾', value: this.randomData() },
        { name: '香港', value: this.randomData() }, { name: '澳门', value: this.randomData() }
      ]
      let optionMap = {
        backgroundColor: '#FFFFFF',
        title: {
          text: '2099年全国GDP分布',
          subtext: '非真实数据'
        },
        tooltip: {
          show: true,
          formatter: function(item) {
            let resData = item.data
            // console.log(item, resData);
            if (resData) {
              return '省份:' + resData.name + '<br/>' + '数量:' + resData.value
            }
          }
        },
        selectedMode: 'single',
        zoom: 5,
        visualMap: {
          show: true,
          type: 'continuous',
          text: ['高', '低'],
          x: 'left',
          y: 'center',
          splitList: [
            { start: 500, end: 600 }, { start: 400, end: 500 },
            { start: 300, end: 400 }, { start: 200, end: 300 },
            { start: 100, end: 200 }, { start: 0, end: 100 }
          ],
          color: ['#2195FF', '#33A0FF', '#4EAFFF', '#6EC2FF', '#83CEFF', '#AAE5FF']
        },

        //配置属性
        series: [{
          name: '数据',
          type: 'map',
          mapType: 'china',
          roam: false,
          label: {
            normal: {
              show: false  //省份名称
            },
            emphasis: {
              show: true
            }
          },
          data: myData  //数据
        }]
      }
      myChart.on('click', function(param) {
        //地图省份点击事件
      })
      myChart.setOption(optionMap)
      window.addEventListener('resize', function() {
        myChart.resize()
      })
    },
    drawEarth() {
      let mapData = this.$refs.earth
      let myChart = this.$echarts.init(mapData)

      /**
       地图迁徙颜色自定义
       */
      let color = ['#6bcc75', '#65c78b', '#5fc2a0', '#5abead',
        '#52b9c7', '#4fb6d2', '#4ab2e5', '#52b9c7', '#5abead', '#dfae10', '#d5b314', '#c1bb1f',
        '#f34e2b', '#f56321', '#f56f1c', '#4ab2e5', '#4fb6d2', '#f58414', '#f58f0e', '#f5a305', '#e7ab0b', '#b9be23',
        '#e7ab0b', '#dfae10', '#d5b314', '#c1bb1f', '#b9be23',
        '#a6c62c', '#96cc34', '#89d23b', '#7ed741', '#77d64c',
        '#71d162'
      ]
      let points = [
        {
          value: [118.8062, 31.9208]
        }, {
          value: [127.9688, 45.368]
        }, {
          value: [110.3467, 41.4899]
        }, {
          value: [125.8154, 44.2584]
        }, {
          value: [116.4551, 40.2539]
        }, {
          value: [123.1238, 42.1216]
        }, {
          value: [114.4995, 38.1006]
        }, {
          value: [117.4219, 39.4189]
        }, {
          value: [112.3352, 37.9413]
        }, {
          value: [109.1162, 34.2004]
        }, {
          value: [103.5901, 36.3043]
        }, {
          value: [106.3586, 38.1775]
        }, {
          value: [101.4038, 36.8207]
        }, {
          value: [103.9526, 30.7617]
        }, {
          value: [108.384366, 30.439702]
        }, {
          value: [113.0823, 28.2568]
        }, {
          value: [102.9199, 25.46639]
        }, {
          value: [119.4543, 25.9222]
        }, {
          value: [91.11, 29.97]
        }, {
          value: [87.68, 43.77]
        }]
      myChart.showLoading()

      let index = -1

      this.$echarts.registerMap('china', data)
      myChart.hideLoading()
      let option = {
        backgroundColor: '#fff',
        geo: {
          map: 'china',
          zoom: 1.1,
          roam: false,
          itemStyle: {
            normal: {
              areaColor: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [{
                  offset: 0,
                  color: '#09132c' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#274d68' // 100% 处的颜色
                }],
                globalCoord: true // 缺省为 false
              },
              shadowColor: 'rgb(58,115,192)',
              shadowOffsetX: 10,
              shadowOffsetY: 11
            },
            emphasis: {
              areaColor: '#2AB8FF',
              borderWidth: 0,
              color: 'green',
              label: {
                show: false
              }
            }
          },
          regions: [{
            name: '南海诸岛',
            itemStyle: {
              areaColor: 'rgba(0, 10, 52, 1)',
              borderColor: 'rgba(0, 10, 52, 1)',
              normal: {
                opacity: 0,
                label: {
                  show: false,
                  color: '#009cc9'
                }
              }
            }
          }]
        },
        color: color,
        series: [{
          type: 'map',
          roam: false,
          label: {
            normal: {
              show: true,
              textStyle: {
                color: '#1DE9B6',
                fontSize: '12px'
              }
            },
            emphasis: {
              textStyle: {
                color: 'rgb(183,185,14)'
              }
            }
          },
          itemStyle: {
            normal: {
              borderColor: 'rgb(147, 235, 248)',
              borderWidth: 1,
              areaColor: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [{
                  offset: 0,
                  color: '#09132c' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#274d68' // 100% 处的颜色
                }],
                globalCoord: true // 缺省为 false
              }
            },
            emphasis: {
              areaColor: 'rgb(46,229,206)'
            }
          },
          zoom: 1.1,
          map: 'china' //使用
        }, {
          type: 'effectScatter',
          coordinateSystem: 'geo',
          showEffectOn: 'render',
          zlevel: 1,
          rippleEffect: {
            period: 15,
            scale: 4,
            brushType: 'fill'
          },
          hoverAnimation: true,
          label: {
            normal: {
              formatter: '{b}',
              position: 'right',
              offset: [15, 0],
              color: '#1DE9B6',
              show: true
            }
          },
          itemStyle: {
            normal: {
              color: function(i) {
                return color[i.dataIndex]
              },
              shadowBlur: 10,
              shadowColor: '#333'
            }
          },
          symbolSize: 12,
          data: points
        },
          {
            type: 'lines',
            zlevel: 2,
            effect: {
              show: true,
              period: 4, //箭头指向速度，值越小速度越快
              trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重
              symbol: 'arrow', //箭头图标
              symbolSize: 7 //图标大小
            },
            lineStyle: {
              normal: {
                color: function(i) {
                  return color[i.dataIndex]
                },
                width: 1, //线条宽度
                opacity: 0.1, //尾迹线条透明度
                curveness: .3 //尾迹线条曲直度
              }
            },
            data: [
              {
                coords: [
                  [118.8062, 31.9208],
                  [123.1238, 42.1216]
                ]
              }, {
                coords: [
                  [127.9688, 45.368],
                  [123.1238, 42.1216]
                ]
              }, {
                coords: [
                  [110.3467, 41.4899],
                  [123.1238, 42.1216]
                ]
              }, {
                coords: [
                  [125.8154, 44.2584],
                  [123.1238, 42.1216]
                ]
              }, {
                coords: [
                  [116.4551, 40.2539],
                  [123.1238, 42.1216]
                ]
              }, {
                coords: [
                  [119.4543, 25.9222],
                  [123.1238, 42.1216]
                ]
              }, {
                coords: [
                  [114.4995, 38.1006],
                  [123.1238, 42.1216]
                ]
              }, {
                coords: [
                  [117.4219, 39.4189],
                  [123.1238, 42.1216]
                ]
              }, {
                coords: [
                  [112.3352, 37.9413],
                  [123.1238, 42.1216]
                ]
              }, {
                coords: [
                  [109.1162, 34.2004],
                  [123.1238, 42.1216]
                ]
              }, {
                coords: [
                  [103.5901, 36.3043],
                  [123.1238, 42.1216]
                ]
              }, {
                coords: [
                  [106.3586, 38.1775],
                  [123.1238, 42.1216]
                ]
              }, {
                coords: [
                  [101.4038, 36.8207],
                  [123.1238, 42.1216]
                ]
              }, {
                coords: [
                  [103.9526, 30.7617],
                  [123.1238, 42.1216]
                ]
              }, {
                coords: [
                  [108.384366, 30.439702],
                  [123.1238, 42.1216]
                ]
              }, {
                coords: [
                  [113.0823, 28.2568],
                  [123.1238, 42.1216]
                ]
              }, {
                coords: [
                  [102.9199, 25.46639],
                  [123.1238, 42.1216]
                ]
              }
              , {
                coords: [
                  [91.11, 29.97],
                  [123.1238, 42.1216]
                ]
              }
              , {
                coords: [
                  [87.68, 43.77],
                  [123.1238, 42.1216]
                ]
              }

            ]
          }

        ]
      }
      myChart.setOption(option, true)
    },
    drawChartLine() {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      let content = this.$refs.chart_1
      let myChart = this.$echarts.init(content)
      let option = {
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['2024/9/4', '', '', '', '2024/10/7']
        },
        yAxis: {
          type: 'value'
        },
        grid: {
          left: '15%',
          right: '15%',
          top: '15%',
          height: '120'
        },
        series: [
          {
            data: [485, 687, 901, 330, 1320],
            type: 'line',
            lineStyle: {
              color: '#317EFB'
            },
            itemStyle: {
              color: '#6259F1'
            },
            areaStyle: {
              color: '#73A1FB'
            },
            smooth: true
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    drawChartBar() {
      let content = this.$refs.chart_2
      let myChart = this.$echarts.init(content)
      let colorList = ['#edf8b1', '#c7e9b4', '#7fcdbb', '#41b6c4', '#1d91c0', '#225ea8', '#253494']
      let option = {
        xAxis: {
          type: 'category',
          data: ['0时', '', '8时', '', '16时', '', '24时']
        },
        yAxis: {
          type: 'value'
        },
        grid: {
          left: '20%',
          top: '15%',
          height: '120'
        },

        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            itemStyle: {
              color: function(params) {
                return colorList[params.dataIndex]
              }
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    drawChartPie() {
      let content = this.$refs.chart_3
      let myChart = this.$echarts.init(content)
      let option = {
        backgroundColor: 'white',
        title: {
          text: '某站点用户访问来源',
          subtext: '非真实数据',
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              { value: 335, name: '直接访问' },
              { value: 310, name: '邮件营销' },
              { value: 234, name: '联盟广告' },
              { value: 135, name: '视频广告' },
              { value: 1548, name: '搜索引擎' }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      myChart.setOption(option)
    }
  },
  mounted() {
    this.drawChartLine()
    this.drawChartBar()
    this.drawChartPie()
    this.drawMap()
    this.drawEarth()
  }
}
</script>
<style scoped lang="scss">
.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.vab-app-main {
  width: 100%;
  padding: 20px;
  padding-bottom: 70px;
  overflow: hidden;
  transition: all .3s cubic-bezier(.645, .045, .355, 1), border 0s, color .1s, font-size 0s;

  section {
    background: var(--el-color-white);
    transition: all .3s cubic-bezier(.645, .045, .355, 1), border 0s, color .1s, font-size 0s;

    .index-container {
      min-height: calc(100vh - 205px);
      transition: all .3s cubic-bezier(.645, .045, .355, 1), border 0s, color .1s, font-size 0s;

      .box-card {
        border-radius: 4px;
        min-height: 36px;
        height: 155px;
        display: flex;
        align-items: center;
        padding: 20px;
        justify-content: center;

        .grid-bg {
          width: 60px;
          height: 60px;
          margin-right: 20px;

          img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
          }
        }

        .page-header-tip {
          flex: auto;
          width: calc(100% - 330px);
          min-width: 300px;

          .grid-con {
            .con-title {
              font-weight: 800;
              font-size: 20px;
              text-align: left;
            }

            .title-bg {
              min-height: 20px;
              font-size: 14px;
              color: #808695;
              text-align: left;
            }
          }

        }

        .page-header-avatar-list {
          flex: 1;
          flex-direction: column;
          min-width: 100px;
          margin-left: 20px;
          text-align: right;

          .vab-avatar-list {
            .el-avatar {
              display: inline-block;
              margin-left: -8px;
              cursor: pointer;
            }
          }

          p {
            font-size: 14px;
            margin-top: 10px;
            margin-right: 9px;
            line-height: 0;
          }
        }
      }

      .chart {
        .head-chart {
          display: flex;
          padding: 15px 20px 15px 20px;
          align-items: center;
          justify-content: space-between;
          border-bottom: 1px solid #E4E7ED;

          .icon-chart {
            font-size: 14px;

            i {
              margin-right: 5px;
            }
          }

          .cover-chart {
            width: 32px;
            height: 26px;
            text-align: center;
            background-color: #F0F9EB;

            .day-chart {
              font-size: 12px;
              color: #13D6C0;
              line-height: 24px;
            }
          }
        }

        .chart-pro {
          width: 100%;
          height: 100%;
        }

        .chart-pic {
          width: 100%;
          height: 60%;
          margin: 0 auto;
        }

        .text-chart {
          max-height: 55px;
          max-width: 90%;
          margin: 0 auto;
          padding: 15px 0;
          text-align: left;
          border-top: 1px solid #DCDFE6;

          span {
            font-size: 14px;
          }
        }
      }

      .grid-icon {
        margin-top: 20px;

        .grid-content {
          background-color: #fff;
        }

        .flex {
          padding: 8px;
          flex-direction: column;
        }

        .el-col {
          p {
            font-size: 14px;
            margin-top: 10px;
            text-align: center;
          }

          .el-badge {
            span {
              cursor: pointer;
              font-size: 40px;
            }

            i {
              display: block;
              width: 50px;
              height: 50px;
              margin: auto;
              font-size: 40px;
              transition: all .3s ease-in-out;
            }
          }

        }
      }

      .earth {
        width: 100%;
        height: 350px;
      }

      .map-header {
        display: flex;
        align-items: center;
        padding-bottom: 10px;
        border-bottom: 1px solid #E4E7ED;
        justify-content: space-between;

        .map-title {
          .head-text {
            margin-left: 5px;
          }
        }

        .map-cover {
          padding: 5px 8px;
          background-color: #fdf6ec;

          .cover-title {
            color: #ffba00;
            line-height: 20px;
            font-size: 12px;
          }
        }
      }

      .map {
        width: 100%;
        padding: 20px 0;
        min-height: 350px;
      }
      .el-col {
        border-radius: 0px !important;
      }
      .grid-content {
        border-radius: 0px !important;
      }
    }
  }
}
</style>
